<template>
  <div id="detailsnavbar">
      <navtabbar>
          <div slot="lefttabbar" class="left" @click="imgclick">
              <img src="@/assets/img/common/back.svg"  alt="">
              </div>
          <div slot="centertabbar" class="title">
              <div v-for= "(item,index) in titles" :key= "item.detailsnavbar" class="titleitem" 
              :class= "{active:index === currentindex}" @click="detialsbarindex(index)">{{item}}</div>
          </div>
      </navtabbar>
  </div>
</template>

<script>
import navtabbar from '../../../src/components/common/navtabbarcommon/navtabbar.vue'
export default {
    name:'detailsnavbar',
    components: {
        navtabbar
    },
     data () {
        return {
            titles:['商家','参数','评论','推荐'],
            currentindex:0
        }
    },
    methods: {
        detialsbarindex(index){
            this.currentindex = index
            this.$emit('currentnavbar',index)
        },
        imgclick(){
            this.$router.push('/home')
        }
    }
}
</script>

<style scoped>
    .title{
        display: flex;
    }

    .titleitem{
        flex: 1;
    }

    .active{
        color: red;
    }

    .left img{
        height: 20px;
        padding-top: 12px;
    }
</style>